<script setup>
import { ref, inject } from 'vue'

const props = defineProps({
  defaultOpen: true,
  width: 'w-64',
})

const isSmallPage = inject('isSmallPage')
const isOpen = ref(props.defaultOpen)

//如果屏幕尺寸小于768px，则默认抽屉关闭
isOpen.value = !isSmallPage.value

const toggle = () => {
  isOpen.value = !isOpen.value
}

const open = () => {
  isOpen.value = true
}

const close = () => {
  isOpen.value = false
}

defineExpose({ isOpen, toggle, open, close })
</script>

<template>
  <div :class="['drawer-box', isOpen ? 'drawer-open' + width : 'drawer-closed w-0']">
    <div
      :class="[
        'transition-transform bg-[--el-bg-color] h-full',
        width,
        isOpen ? 'drawer-open' : 'drawer-closed',
      ]"
    >
      <slot></slot>
      <div :class="['toggle-button', isOpen ? '-right-[5px]' : '-right-[10px]']" @click="toggle">
        <span v-if="isOpen">&lt;</span>
        <span v-else>&gt;</span>
      </div>
    </div>
  </div>
</template>

<style scoped>
.drawer-open {
  transform: translateX(0);
}

.drawer-closed {
  transform: translateX(-100%);
}

.drawer-box {
  @apply transition-transform border-r-[1px] border-r-[--el-border-color] absolute z-20 md:relative;
  height: calc(100vh - 3.8rem);
}

.toggle-button {
  @apply absolute top-1/2 transform -translate-y-1/2 w-3 h-14 bg-[--el-fill-color-darker] rounded flex justify-center text-[8px] items-center cursor-pointer text-[--el-text-color-secondary] shadow;
}
</style>
